<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="template/item :: app(~{::title}, ~{}, ~{}, ~{::div.container-item}, ~{::script})">
<head>
    <title>User</title>
</head>
<body>
    <div class="container-item">
        <el-row :gutter="page.gutter" :style="page.rowStyle">
            <el-col :span="24">
                <el-card>
                    <el-row :gutter="page.gutter">
                        <el-col :span="22">
                            <el-input
                                v-model="list.query.params.keywords"
                                @input="search"
                                clearable
                                suffix-icon="el-icon-search"
                                placeholder="请输入关键字"/>
                        </el-col>
                        <el-col :span="2" class="txt-r">
                            <el-button type="primary" @click="handleAdd">新增</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="page.gutter" :style="page.rowStyle">
            <el-col :span="24">
                <el-card class="min-h-1">
                    <el-table
                        :data="list.data"
                        v-loading.body="list.loading"
                        fit
                        stripe
                        border
                        highlight-current-row
                        :max-height="600">
                        <el-table-column :index="indexCalc" type="index" width="50" align="center"></el-table-column>
                        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
                        <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
                        <el-table-column label="是否启用" width="100" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.enabled"
                                    @change="handleEnable(scope.row.id, $event)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="100"
                            align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    circle
                                    @click="handleEdit(scope.row)">
                                </el-button>
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    circle
                                    @click="handleDelete(scope.$index, scope.row.id)">
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="page.gutter">
            <el-col :span="24">
                <el-card>
                    <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 50, 100, 500]"
                        :page-size="list.query.size"
                        :current-page.sync="list.query.page"
                        :total="list.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog
            :visible.sync="dialogVisible"
            @closed="handleClosed"
            width="30%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item prop="username" label="用户名">
                    <el-input v-model.trim="form.username" :disabled="form.id ? true : false"></el-input>
                </el-form-item>
                <el-form-item prop="nickname" label="昵称">
                    <el-input v-model.trim="form.nickname"></el-input>
                </el-form-item>
                <!--<el-form-item prop="password" label="密码">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>-->
                <el-form-item label="是否启用">
                    <el-switch v-model="form.enabled"></el-switch>
                    <!--<el-switch
                        v-model="form.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>-->
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">保 存</el-button>
            </span>
        </el-dialog>
    </div>

    <script type="text/javascript">
        Factory.Vue.build({
            data() {
                const gutter = 15;
                const lenLimit = { max: 50, message: '长度超出范围' };

                return {
                    axios: Factory.Request,
                    api: '/api/user',
                    page: {
                        gutter,
                        rowStyle: { marginBottom: `${gutter}px` }
                    },
                    dialogVisible: false,
                    list: {
                        data: [],
                        total: 0,
                        loading: false,
                        query: {
                            page: 1,
                            size: 10,
                            params: {
                                keywords: ''
                            }
                        }
                    },
                    form: {
                        id: '',
                        nickname: '',
                        username: '',
                        // password: '',
                        enabled: false
                    },
                    rules: {
                        nickname: lenLimit,
                        username: [
                            { required: true, message: '请输入用户名' },
                            { validator: (rule, value, callback) => {
                                    const params = { id: this.form.id, username: value };
                                    this.axios.get(`${this.api}/unique`, { params })
                                        .then(data => callback(data ? undefined : '用户名存在'));
                                }, trigger: 'blur'
                            },
                            lenLimit
                        ],
                        // password: [
                        //     { required: true, message: '请输入密码' },
                        //     lenLimit
                        // ]
                    }
                }
            },
            created() {
                this.search();
            },
            methods: {
                search() {
                    this.list.loading = true;
                    this.axios.get(this.api, {
                        params: this.list.query,
                        paramsSerializer: params => Qs.stringify(params, { allowDots: false })
                    }).then(({ records: data, total }) => {
                        this.list.data = data;
                        this.list.total = total;
                    }).finally(() => {
                        this.list.loading = false;
                    });
                },
                indexCalc(ind) {
                    const { page, size } = this.list.query;
                    return (page - 1) * size + (ind + 1);
                },
                handleSizeChange(val) {
                    this.list.query.size = val;
                    this.search();
                },
                handleCurrentChange(val) {
                    this.list.query.page = val;
                    this.search();
                },
                handleEnable(id, enabled) {
                    this.axios.put(this.api, { id, enabled });
                },
                handleAdd() {
                    console.log(this.form)
                    this.dialogVisible = true;
                },
                handleEdit({ id, nickname, username, enabled }) {
                    this.form = { id, nickname, username, enabled };
                    this.dialogVisible = true;
                },
                handleDelete(ind, id) {
                    this.list.data.splice(ind, 1);
                    this.axios.delete(`${this.api}/${id}`);
                },
                handleSave() {
                    this.$refs.form.validate(valid => valid && (() => {
                        console.log('User form data:', JSON.stringify(this.form));
                        this.axios.post(this.api, this.form).then(({ username }) => {
                            this.list.query.params.keywords = username;
                            this.search();
                        }).finally(() => this.dialogVisible = false);
                    })());
                },
                handleClosed() {
                    this.$refs.form.resetFields();
                    this.form = {
                        id: '',
                        nickname: '',
                        username: '',
                        enabled: false
                    };
                }
            }
        });
    </script>
</body>
</html>
